<template>
	<!-- 运营系统-短剧列表 -->
	<d2-container class="d-flex flex-column">
		<template v-if="$hasPermission('playlet:playlet:index')">
			<div class="d-flex" slot="header">
				<el-form class="d-flex b-s my-10" :inline="true" size="small" :model="dataForm"
					@keyup.enter.native="getTableList()">
					<el-form-item label="轮播图名称">
						<el-input v-model="dataForm.keyword" placeholder="轮播图名称" clearable />
					</el-form-item>
					<el-form-item label="状态">
						<el-select clearable v-model="dataForm.status" placeholder="请选择">
							<el-option v-for="(item,index) in status" :key="index" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button icon="el-icon-search" type="primary"
							@click="getTableList()">查询</el-button>
					</el-form-item>
					<el-form-item>
						<el-button type="success" icon="el-icon-circle-plus-outline" v-show="$hasPermission('playlet:playlet:create')"
							@click="addOrUpdateData()">添加轮播图</el-button>
					</el-form-item>
				</el-form>
			</div>
			<div class="d-flex h-100 b-s flex-column">
				<div class="d-flex flex-1">
					<div class="overflow">
						<vxe-grid keep-source border resizable highlight-hover-row size="small" ref="pGrid"
							:loading="tableLoading" :loading-config="{icon: 'vxe-icon-indicator roll', text: '正在拼命加载中...'}"
							:columns="columns" height="100%" :data="dataList"
							:customs.sync="customColumns" :row-config="{useKey: true}" :column-config="{useKey: true}"
							:edit-config="{trigger: 'click', mode: 'row', showStatus: true}">
						</vxe-grid>
					</div>
				</div>
			</div>
			<!-- 分页 -->
			<div class="d-flex" slot="footer">
				<vxe-pager background size="medium" align="right" :border="false" :current-page="dataForm.page"
					:page-size="dataForm.pageSize" :total="total"
					:layouts="['PrevPage', 'Number', 'NextPage', 'Sizes', 'FullJump', 'Total']"
					@page-change="handlePageChange">
				</vxe-pager>
			</div>
			<!-- 新增/修改弹窗 -->
			<baseBanner-add-or-update v-if="addOrUpdateVisible" ref="addOrUpdateDialog"
				@refreshDataList="getTableList"></baseBanner-add-or-update>
			<!-- 图片预览弹窗 -->
			<pic-preview v-if="picVisible" ref="picDialog"></pic-preview>
		</template>
		<template v-else>
			<div class="d-flex a-center j-center h-100 b-s flex-column">
				<img class="d-flex mb-10" :src="permissionBase64" alt="没有访问权限" style="width: 300px;">
				<div class="d-flex">抱歉，您没有访问权限</div>
			</div>
		</template>
	</d2-container>
</template>

<script>
	let that;
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import mixinViewModule from '@/mixins/view-module'
	import baseBannerAddOrUpdate from './baseBanner-add-or-update'
	import PicPreview from './picPreview'
	export default {
		mixins: [mixinViewModule],
		components: {
			PicPreview,
			baseBannerAddOrUpdate
		},
		data() {
			return {
				permissionBase64:'',
				tableLoading:false,
				curent: 0,
				total: 0,
				curName: '',
				status:[{
					value:0,
					label:'禁用',
				},{
					value:1,
					label:'正常',
				}],
				dataForm: {
					page: 1,
					pageSize: 10,
					keyword:'',//搜索
				},
				playTitle:'',
				innerPlayVisible: false,
				uploadAddVisible: false,//批量上传弹窗
				picVisible: false,
				videoVisible:false,
				// 增改
				addOrUpdateVisible: false,
				roleVisible: false,
				dataList: [],
				customColumns: [],
				columns: [{
						title: 'ID',
						field: 'id',
						width: 100,
						sortable: true,
						align: 'center'
					},
					{
						title: '轮播图名称',
						field: 'name',
						width: 200,
						sortable: false,
						align: 'center'
					},
					{
						title: '轮播图',
						field: 'cover',
						width: 120,
						sortable: false,
						align: 'center',
						type: 'html', // 标识该列需要显示图片
						formatter: ({ cellValue,row }) => {
						    return `<img src="${cellValue}" width="80" height="auto" class="pointer" onclick="previewPicFn(\'${cellValue}\',\'${row.name+' 封面图'}\')" style="border-radius: 5px;">`
						}
					},
					{
						title: '排序',
						field: 'sort',
						width: 100,
						sortable: false,
						align: 'center'
					},
					{
						title: '状态',
						field: 'status_name',
						width: 100,
						sortable: false,
						align: 'center'
					},
					{
						title: '创建时间',
						field: 'created_at',
						width: 180,
						sortable: true,
						align: 'center'
					},
					{
						title: '更新时间',
						field: 'updated_at',
						width: 180,
						sortable: true,
						align: 'center'
					},
					{
						title: '操作',
						field: 'other',
						width: 200,
						fixed: 'right',
						sortable: false,
						align: 'center',
						slots: {
							default: ({
								row
							}) => {
								return [ <el-button size = "mini"
									round
									icon = "el-icon-edit"
									v-show = {
										this.$hasPermission('playlet:playlet:update')
									}
									onClick = {
										() => this.addOrUpdateData(row)
									}
									type = "primary" > 修改 </el-button>, 
									<el-button size = "mini"
									round
									icon = "el-icon-delete"
									v-show = {
										this.$hasPermission('playlet:playlet:delete')
									}
									type = "danger"
									onClick = {
										() => this.deleteHandleSetter(row)
									} > 删除 </el-button>, 
								]
							}
						}
					}

				]
			}
		},
		created() {
			if (this.$hasPermission('playlet:playlet:index')) {
				this.getTableList();
			}
		},
		mounted(){
			that = this;
			//预览图片
			window.previewPicFn = (url,title)=>{
				console.log(url);
				console.log(title);
				that.picVisible = true;
				that.$nextTick(() => {
					that.$refs.picDialog.update(url,title);
				})
			}
		},
		computed: {
			...mapState('d2admin/user', [
				'info'
			])
		},
		methods: {
			...mapMutations({
				pageInit: 'd2admin/page/init',
				headerSet: 'd2admin/menu/headerSet'
			}),
			async getTableList() {
				this.tableLoading = true;
				if(this.dataForm.keyword!='' || this.dataForm.status!=''){
					this.dataForm.page = 1
				}
				const tableRes = await this.$axios.get('/api/playlet/baseBanner?'+this.$qs.stringify(this.dataForm));
				this.tableLoading = false;
				this.dataList = tableRes.data;
				this.total = tableRes.total;
			},
			//新增/修改弹窗
			async addOrUpdateData(row) {
				console.log(row)
				this.addOrUpdateVisible = true;
				if (typeof row == 'object' && row != null) {
					// this.curName = row.real_name;
					const id = row.id;
					const userRes = await this.$axios.get(`/api/playlet/baseBanner/update/${id}`, {});
					this.$nextTick(() => {
						this.$refs.addOrUpdateDialog.bannerId = id;
						this.$refs.addOrUpdateDialog.innerTitle = row.name;
						this.$refs.addOrUpdateDialog.update(userRes);
					})
				} else {
					this.$nextTick(() => {
						this.$refs.addOrUpdateDialog.bannerId = null;
						this.$refs.addOrUpdateDialog.init()
					})
				}
			},
			// 删除
			deleteHandleSetter(row) {
				this.$confirm(this.$t('public.prompt.info', {
					handle: this.$t('views.public.delete')
				}), this.$t('public.prompt.title'), {
					confirmButtonText: this.$t('views.public.confirm'),
					cancelButtonText: this.$t('views.public.cancel'),
					type: 'warning'
				}).then(() => {
					this.$axios.delete(`/api/playlet/baseBanner/delete/${row.id}`, {}).then(res => {
						this.$message({
							message: this.$t('views.public.success'),
							type: 'success',
							duration: 500,
							onClose: () => {
								this.getTableList()
							}
						})
					}).catch(() => {})
				}).catch(() => {})
			}
		}
	}
</script>

<style lang="scss" scoped>
	:deep(.vxe-cell .el-button){
		margin-bottom: 10px;
	}
	.item {
		.close{
			width: 26px;
			height: 26px;
			border: 2px solid #f76f21;
			border-radius: 26px;
			.close-icon{
				font-size: 20px;
				color: #f76f21;
			}
		}
		.item-title {
			font-size: 22px;
			font-weight: bold;
		}

		.item-simulate {
			border: 6px solid #a3a2a2;
			border-radius: 10px;
			width: 375px;
			min-height: 700px;
			max-height: 1200px;
			margin: 0 auto 10px;
			padding: 10px 5px;

			.list {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				align-items: flex-start;

				.box {
					width: 165px;
					height: 93px;
					background: #f9f8f8;
					border: 2px solid #f5f5f5;
					border-radius: 8px;
					display: flex;
					position: relative;
					flex-direction: column;
					justify-content: flex-end !important;
					padding: 0 !important;
					box-sizing: content-box;
					margin: 10px 0;
					align-items: center;
					.pointer{
						width: 50%;
						height: auto;
						position: absolute;
						bottom: 0;
						right: 0;
					}
					.price{
						font-size: 15px;
						font-weight: 600;
						line-height: 35px;
						margin: 0;
						em{
							font-size: 35px;
							font-style: normal;
						}
					}
					.get {
					    width: 100%;
					    height: 28px;
					    line-height: 28px;
					    text-align: center;
					    background: linear-gradient(180deg,#fff19d,#ff9e00);
					    border-radius: 0 0 5px 5px;
					    font-size: 14px;
					    color: #583600;
					    letter-spacing: 1px;
					    font-weight: 500;
					    margin: 0;
					}
				}
				.box-normal{
					.price{
						color: #f76f21;
					}
					.get {
					    background: #fff7e3;
					    color: #bf891c;
					}
				}
				.box-active {
					border: 2px solid #f97d36;
				}
			}
		}
	}
</style>